<template>
	<view class="topicBar">
		<view class="content">
			<view class="item" v-for="(item,index) in attentions" :key="index" @tap="topicClick(index)">
				<view class="image">
					<image :src="item.topicIcon" class="img"></image>
				</view>
				<view class="text">
					{{item.topicName}}
				</view>
				<view class="attention" v-if="flag">
					关注
				</view>
				<view class="blank" v-else></view>
			</view>
			<view class="item" v-if="attentions.length % 2 == 1">
				<view class="image">
					<image src="../../../static/tabbar/map.png" class="img"></image>
				</view>
				<view class="text">
					{{}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TopicBar',
		props: {
			attentions:{
				type: Array,
				default() {
					return []
				}
			},
			flag:{
				type:Number,
				default() {
					return 0
				}
			}
		},
		methods:{
			topicClick(index) {
				uni.setStorage({
					key: 'topic',
					data: {
						topic: this.attentions[index]
					}
				})
				uni.navigateTo({
					url:'../../pages/topic/TopicDetail?topicId=' + this.attentions[index].topicId
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0 14.54rpx;
	}
	.item {
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		width: 48%;
		height: 72.72rpx;
		border-radius: 18.18rpx;
		margin-bottom: 14.54rpx;
	}
	.image {
		flex: 1;
		width: 54.54rpx;
		height: 54.54rpx;
		border-radius: 18.18rpx;
		margin: 9.09rpx 14.54rpx;
		background-color: #999999;
	}
	.image .img {
		width: 54.54rpx;
		height: 54.54rpx;
		border-radius: 18.18rpx;
	}
	.text {
		flex: 4;
		text-align: left;
		line-height: 72.72rpx;
		font-size: 25.45rpx;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.attention {
		flex: 2;
		background-color: #62A7FF;
		color: #FFFFFF;
		text-align: center;
		border-radius: 36.36rpx;
		margin: 18.18rpx;
		font-size: 18.18rpx;
		line-height: 36.36rpx;
	}
	
	.blank {
		flex: 2;
	}
</style>
